<template>
	<view class="splash-screen">
		<!-- S 图像 -->
		<sol-image v-if="loading" class="splash-screen_icon" src="/static/logo.png"></sol-image>
		<sol-image class="splash-screen_screen" :class="{'splash-screen_screen-loading': loading}"
			src="https://pic.hanfugou.com/ios/2020/1/15/18/47/157908525552664.jpg_700x.jpg" @load="fnScrenLoad">
		</sol-image>
		<!-- E 图像 -->

		<!-- S 底部品牌 -->
		<view class="splash-screen_footer safe-area-inset-bottom">
			<text class="splash-screen_footer-brand">孤独菌</text>
			<text class="splash-screen_footer-aside">你的孤独会传染，也会治愈</text>
		</view>
		<!-- E 底部品牌 -->
	</view>
</template>

<script>
	export default {
		name: "SplashScreen",
		data() {
			return {
				// 图片载入状态
				loading: true
			};
		},
		mounted() {
			// 定时跳转
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				})
			}, 5000);
		},
		methods: {
			// 图片载入
			fnScrenLoad(e) {
				// widthxheight: 700x1246
				this.$log(this.$options.name, e.detail);
				this.loading = (e.detail.width != 700);
			}
		}
	}
</script>

<style lang="scss">
	.splash-screen {
		min-height: 100vh;
		background-color: #474e54;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		// 图标
		&_icon {
			height: 360rpx !important;
			width: 360rpx !important;
			padding-top: 240rpx;
		}

		// 图片画面
		&_screen {
			display: block;
			opacity: 1;
			height: 80vh !important;
			width: 100vw !important;
			flex: 1;

			&-loading {
				display: none !important;
				opacity: 0;
			}
		}

		// 底部品牌
		&_footer {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			height: 180rpx;
			width: 100%;

			&-brand {
				font-size: 48rpx;
				font-weight: bold;
				color: #DDDDDD;
				letter-spacing: 8rpx;
				line-height: 112rpx;
			}

			&-aside {
				font-size: 28rpx;
				font-weight: bold;
				color: #BBBBBB;
				letter-spacing: 6rpx;
			}
		}
	}
</style>
